<template>
	<view class="all">
		<view class="attbox">
			<image class="booor" @click="login" src="../../static/imges/zuo.png" mode=""></image>
			<input class="weui-input" placeholder="输入品牌名称或关键字" @click="arrter" placeholder-class="beter" />
		</view>
		<tabControl :current="current" :values="dhitems" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
		 @clickItem="onClickItem" class="butter"></tabControl>
		<view class="box"></view>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" style="height: 1400rpx;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="(item,index) in items" :key='index'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="guan" v-for="item in brandList" :key="item.id">
						<image @click="parent" class="box1" src="../../static/imges/details1.png" mode=""></image>
						<view class="bott" @click="parent">
							<view class="buan">
								{{item.title}}
							</view>
							<view class="contont">
								<text>{{item.region}}</text>
								<text style="margin-left: 30rpx;">301人浏览</text>
							</view>
					
							<view class="demoList">
								轻松开店
							</view>
							<view class="box8">
								{{item.money}} 万元
							</view>
						</view>
						
						<view style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
							<image class="aooo" src="../../static/imges/dianhua.png" mode=""></image>
							<text style="color: red;margin-top: 20rpx;">{{item.hotline}}</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	import instance from '../../api/requset.js'
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				items: ['全部', '特色加盟', '生活服务加盟', '餐饮加盟', '服装店加盟'],
				current: 0,
				brandList:[]
			};
		},
		computed:{
			dhitems(){
				return this.items.map(item=>item.type_name)
			}
		},
		onLoad() {
			var that  = this
			var serverUrl = instance.serverUrl
			uni.request({
			    url: serverUrl + '/index.php/api/Index/JoinList', //仅为示例，并非真实接口地址。
				method:'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded', },
			    success: (res) => {
			        console.log(res.data.data,"首页")
					this.brandList = res.data.data.brand.data
					this.items = res.data.data.brand_type
			    },
			});

			
		},
		methods: {
			onClickItem(val) {
				this.current = val.currentIndex
			},
			scollSwiper(e) {
				this.current = e.target.current
			},
			login(){
				uni.switchTab({
				    url: './Home'
				});
			},
			parent(){
				uni.navigateTo({
					url:'./Details'
				})
			}
		}
	};
</script>

<style>
	page{
		height: 100%;
	}
	.weui-input {
		width: 500rpx;
		line-height: 60rpx;
		height: 60rpx;
		font-size: 20rpx;
		background-image: url(../../static/imges/ss.png);
		background-size: 35rpx 35rpx;
		background-position: 40rpx 15rpx;
		background-repeat: no-repeat;
		padding-left: 90rpx;
		background-color: #F6F6F6;
		border-radius: 40rpx;
		margin-top: 100rpx;
		margin-left: 10rpx;
	}

	.booor {
		width: 40rpx;
		height: 40rpx;
		margin: 110rpx 0 0 20rpx;
	}

	.attbox {
		position: fixed;
		top: 0;
		width: 100%;
		height: 200rpx;
		display: flex;
		z-index: 999;
		background-color: #fff;
	}

	.butter {
		margin-top: 200rpx;
	}

	.box {
		width: 100%;
		height: 25rpx;
		background-color: #F4F4F4;
		margin-top: 290rpx;
	}

	.box1 {
		width: 250rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.aooo {
		width: 60rpx;
		height: 60rpx;
		margin-top: 40rpx;
	}

	.guan {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 10rpx 0 10rpx;
		height: 240rpx;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.buan {
		font-weight: 600;
		width: 160px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.contont{
		color: #a1a1a1;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.demoList{
		margin-top: 20rpx;
		font-size: 18rpx;
		color: #1989C9;
		margin-left: 20rpx;
	}
	.box8{
		color: #C92B29;
		font-weight: 600;
		margin-top: 20rpx;
	}
	.swiper{
		z-index: -1;
	}
</style>
